import {
    BQGIS_initSynchronization
} from './BQGIS-camera/BQGIS-Synchronization'

/**
 * 双屏，四屏切换
 * @param    viewer          Mars3d实例对象
 * @param    styleOption     样式配置(可选)
 * 
 * @function setMultiSence      设置屏幕类型
 * 
 * 
 */
export function BQGIS_multiSence({
    viewer,
    styleOption = {},
}) {
    this.mode = null
    this.viewer = viewer
    this.styleOption = Object.assign({
        leftRight: {
            // 左右屏时的样式
            parent: {
                display: "flex",
                flexWrap: "wrap",
                justifyContent: "space-around"
            },
            firstDom: {
                width: "49.9%",
                height: "100%"
            },
            secondDom: {
                width: "49.9%",
                height: "100%"
            },
            thirdlyDom: {
                width: 0,
                height: 0
            },
            fourthDom: {
                width: 0,
                height: 0
            }
        },
        upDown: {
            // 上下屏时的样式
            parent: {
                display: "flex",
                flexWrap: "wrap",
                justifyContent: "space-around"
            },
            firstDom: {
                width: "100%",
                height: "49.9%"
            },
            secondDom: {
                width: "100%",
                height: "49.9%"
            },
            thirdlyDom: {
                width: 0,
                height: 0
            },
            fourthDom: {
                width: 0,
                height: 0
            }
        },
        four: {
            // 四屏时的样式
            parent: {
                display: "flex",
                flexWrap: "wrap",
                justifyContent: "space-around"
            },
            firstDom: {
                width: "49.9%",
                height: "49.9%"
            },
            secondDom: {
                width: "49.9%",
                height: "49.9%"
            },
            thirdlyDom: {
                width: "49.9%",
                height: "49.9%"
            },
            fourthDom: {
                width: "49.9%",
                height: "49.9%"
            }
        },
        original: { // 原始样式，用于还原
            parent: {
                display: "flex",
                flexWrap: "wrap",
                justifyContent: "space-around"
            },
            firstDom: {
                width: "100%",
                height: "100%"
            },
            secondDom: {
                width: 0,
                height: 0
            },
            thirdlyDom: {
                width: 0,
                height: 0
            },
            fourthDom: {
                width: 0,
                height: 0
            }
        }
    }, styleOption)
    this.dom = {
        firstDom: this.viewer.container,
        secondDom: this.createDom('secondDom', this.viewer.container.parentNode, {
            width: 0, height: 0
        }),
        thirdlyDom: this.createDom('thirdlyDom', this.viewer.container.parentNode, {
            width: 0, height: 0
        }),
        fourthDom: this.createDom('fourthDom', this.viewer.container.parentNode, {
            width: 0, height: 0
        })
    }

    const viewerOption = this.viewer.getCurrentOptions()
    viewerOption.basemaps = []
    viewerOption.layers = []
    viewerOption.terrain = new Cesium.EllipsoidTerrainProvider({})

    this.synchronization = BQGIS_initSynchronization({
        viewers: [{
            viewer
        }, {
            id: 'secondDom',
            option: viewerOption
        }, {
            id: 'thirdlyDom',
            option: viewerOption
        }, {
            id: 'fourthDom',
            option: viewerOption
        }],
        viewer
    })
}

BQGIS_multiSence.prototype.createDom = function (id, parent, style) {
    const dom = mars3d.DomUtil.create("div", "", parent)
    dom.setAttribute("id", id)
    Object.assign(dom.style, style)
    return dom
}

/**
 * 设置屏幕类型
 * @param    mode            类型（leftRight、upDown、four, original）
 */
BQGIS_multiSence.prototype.setMultiSence = function (mode) {
    this.mode = mode
    const style = this.styleOption[mode]
    for(let key in style){
        if(key === 'parent'){
            Object.assign(this.viewer.container.parentNode.style, style[key])
        }else [
            Object.assign(this.dom[key].style, style[key])
        ]
    }
}


BQGIS_multiSence.prototype.getViewDataById = function (id) {
    return this.synchronization.getViewDataById(id)
}



BQGIS_multiSence.prototype.setStateById = function (id, state) {
    this.synchronization.setStateById(id, state)
}